<script setup>
import { useRoute,useRouter } from "vue-router";
import { getGoodsList,getGoodsListPingFen,getAddShouCang } from "@/http/api.js";
import { onMounted, reactive } from "vue";
import { useCounterStore } from "@/stores/counter.js"; // vuex
import { Toast } from 'vant'; // 提示
import ERcode from 'qrcode'
const store=useCounterStore()
const route = useRoute();
const router = useRouter();
const { id } = route.params;
console.log(id);
// console.log(getAddShouCang);
const data = reactive({
  goods: {}, // 详情数据
  banner: [], // 轮播图数据
  active: 0,
  tab: ["章节分类", "时间排序"],
  index1: 0,
  activeNames: ['1'],
  tabs: [],
  list:[], // 评分数据
  value:5, // 评分几颗星
  flag:null, // 判断收藏条件
  show:false, // 二维码显示或隐藏
  ErcodeImg:'' // 二维码
});

onMounted(() => {
  getGoods(); // 详情数据
  getPingFen() // 评分
});
// // 详情数据
const getGoods = async () => {
  const res = await getGoodsList(id);

  data.goods = res.info; // 详情数据
  console.log('详情数据：：：：：：：：：：：：：：：',data.goods);
  data.tabs = res.course_periods[0].list; // tab切换数据
  data.flag=res.info.is_collect
  console.log(data.flag);
  // console.log(data.tabs);
  // console.log("res:::::::::", res);
  // console.log("info:::::::::", data.goods);
  data.banner = res.banner; // 轮播图数据
};

const getPingFen=async()=>{ // 评分数据
let obj={
  course_id:id,
  type:1
}
    const res=await getGoodsListPingFen(obj)
    // console.log(res);
    data.list=res.list // 评分数据
}

// 计算时间
const times=(val)=>{Shoucang
  return new Date(val*1000).toLocaleDateString()
}
const tab = (i) => {
  data.index1 = i;
};

// 收藏
const Shoucang=async()=>{
    const token=localStorage.getItem('token')
    if(!token){
      router.push('/login')
    }else{
      data.flag=data.flag == 0 ? 1 : 0
      const res=await getAddShouCang({
        basis_id:id,
        type:1
      })
      data.flag == 1? Toast.success("收藏成功"):Toast.fail("取消收藏")
    }
}

// 点击二维码
const ErCode=()=>{
  data.show=true // 显示
  const url='http://www.taobao.com' // 显示地址路径
  // console.log(url);

  // 生成二维码
  ERcode.toDataURL(url,(error,res)=>{
    data.ErcodeImg=res
  })
}

</script>
<template>
  <div class="goods">
    <header>
      <van-icon name="arrow-left" @click="$router.back()" />
      <h3>课程详情</h3>
      <div class="header_right">
        <!-- 收藏 -->
        <span><van-icon name="star" @click="Shoucang" v-if="data.flag" /></span>
        <span><van-icon name="star-o" @click="Shoucang" color="#f00"  v-if="!data.flag" /></span>
        <!-- 二维码 -->
        <span><van-icon name="scan" @click="ErCode" /></span>
        <div class="erCode">
          <van-popup v-model:show="data.show">
            <p>二维码</p>
            <img :src="data.ErcodeImg" alt="">
          </van-popup>
        </div>
      </div>
    </header>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in data.banner" :key="index">
        <img :src="item.banner_src" alt="" v-show="item.type==1"/>
       <video :src="item.banner_src" v-show="item.type==2"></video>
      </van-swipe-item>
    </van-swipe>
    <!-- 详情数据 -->
    <div class="txt">
      <h4>{{ data.goods.title }}</h4>
      <p class="p1">共{{ data.goods.course_count }}个课时 | 系统课</p>
      <p class="p1">已报名{{ data.goods.sales_num }}人</p>
      <!-- 两个人头 -->
      <ul>
        <li v-for="(item, index) in data.goods.teacher" :key="index" @click="$router.push(`/mingshi?id=${item.teacher_id}`)">
          <img :src="item.avatar" alt="" />
          <span class="p1">{{ item.teacher_name }}</span>
        </li>
      </ul>
      <!-- 课前准备 -->
      <div class="ke">
        <h2>课前准备</h2>
        <div class="div1">
          <p class="dianji">{{ data.goods.teacher_wechat_guided_words }}</p>
          <p class="lx">联系方式</p>
        </div>
      </div>
      <!-- tab切换 -->
      <van-tabs v-model:active="data.active">
        <van-tab title="课程详情">
          <p v-html="data.goods.course_details" class="pp"></p>
        </van-tab>
        <van-tab title="课程安排">
          <div class="box">
            <div class="box1">
              <!-- tab切换 -->
              <div class="er" v-for="(item, index) in data.tab" :key="index">
                <p
                  class="p1"
                  :class="data.index1 == index ? 'active' : ''"
                  @click="tab(index)"
                >
                  {{ item }}
                </p>
              </div>
            </div>
            <!-- tabs下的数据0 -->
            <van-collapse v-model="data.activeNames" v-if="data.index1 == 0">
              <van-collapse-item
                :title="item.title"
                v-for="(item, index) in data.tabs"
                :key="index"
              >
                <div v-for="(item1, index1) in item.child" :key="index1">
                  <p>{{ item1.periods_title }}</p>
                  <p>课程时长{{ item.video_length_str }}</p>
                </div>
              </van-collapse-item>
            </van-collapse>
            <!-- tabs下的数据1 -->
            <van-collapse v-model="data.activeNames" v-if="data.index1 == 1">
              <p
                v-for="(item, index) in data.tabs"
                :key="index"
                class="tab"
              >
                <div v-for="(item1, index1) in item.child" :key="index1">
                  <p>{{ item1.periods_title }}</p>
                  <p>课程时长{{ item.video_length_str }}</p>
                </div>
              </p>
            </van-collapse>
          </div>
        </van-tab>

        <van-tab title="资料下载"></van-tab>
        <van-tab title="课程评价">
          <ol>
            <li v-for="(item,index) in data.list" :key="index">
              <img :src="item.avatar" alt="">
              <div class="div1">
                <p>{{item.user_nickname}}</p>
                <van-rate
                 v-model="data.value"
                 :size="18"
                 color="#ffd21e"
                 void-icon="star"
                 void-color="#eee"
                          />
                <p>{{item.content}}</p>
                <p>{{times(item.created_at)}}</p>
              </div>
            </li>
          </ol>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 底部 -->
    <footer>
      <p class="p1">{{data.goods.price/1000}}</p>
      <p class="pp">
        <span><van-icon name="service-o" /></span>
        <p class="p2">客服</p>
      </p>
      <p class="p3" @click="$router.push(`/mai?id=${data.goods.id}&type=${1}&type_price=${data.goods.price}&activities=${data.goods.is_has_activities}`)">免费领取</p>
    </footer>
  </div>
</template>
<style lang="scss" scoped>
.goods {
  header {
    display: flex;
    align-items: center;
    .p1 {
      width: 60px;
      text-align: center;
    }
    h3 {
      font-size: 32px;
      flex: 1;
      text-align: center;
      margin-left: 160px;
    }
    .header_right {
      width: 200px;
      text-align: center;
      span {
        margin: 0 10px;
      }
    }
    .erCode{
      img{
        width: 600px;
        height: 600px;
      }
    }
  }
  .van-swipe {
    width: 100%;
    height: 500px;
    .van-swipe-item {
      width: 100%;
      height: 500px;
    }
    img {
      width: 100%;
      height: 500px;
    }
  }
  .txt {
    padding: 0 20px;
    margin-bottom: 100px;
    h4 {
      font-size: 36px;
    }
    .p1 {
      font-size: 32px;
      margin-top: -20px;
      color: #ccc;
    }
    ul {
      display: flex;
      li {
        margin: 0 10px;
        img {
          width: 60px;
          height: 60px;
          vertical-align: middle;
          border-radius: 50%;
        }
        span {
          margin-left: 10px;
        }
      }
    }
    .ke {
      padding: 20px 20px;
      margin-top: 40px;
      background: #fff;
      font-size: 20px;
      box-shadow: 0 0 0.53333rem 0 rgb(0 0 0 / 6%);
      margin-bottom: 20px;
      .div1 {
        width: 650px;
        display: flex;
        align-items: center;
        margin-top: -20px;
        justify-content: space-between;
        .lx {
          width: 2.10667rem;
          height: 0.74667rem;
          line-height: 0.74667rem;
          background: #ef8a1f;
          border-radius: 0.37333rem;
          font-size: 0.32rem;
          font-weight: 500;
          color: #fff;
          text-align: center;
        }
      }
      h2 {
        font-size: 32px;
        margin-top: -10px;
      }
    }
    .tab{
      font-size: 24px;
      margin-left: 40px;
      color: #ccc;
    }
    .box1 {
      display: flex;
      .er {
        width: 500px;
        // background: #ef8a1f;
        display: flex;
        font-size: 20px;
        text-align: center;
        margin: 20px auto;
        align-items: center;
        .p1 {
          text-align: center;
          margin: 0 30px;
          color: #999;
          width: 2.77333rem;
          height: 50px;
          line-height: 50px;
          border: 1px solid #d2d2d2;
          border-radius: 0.34667rem;
        }
        .active {
          border: 1px solid #f80;
          color: #f80;
        }
      }
    }
    ol{
      margin-bottom: 200px;
      li{
        display: flex;
       margin: 10px 0;
        font-size: 24px;
        img{
          width: 60px;
          height: 60px;
          margin-top: 20px;
          border-radius: 50%;
        }
        .div1{
          flex: 1;
          margin-left: 30px;
           p{
          margin: 10px 0;
        }
        }
      }
    }
    .pp {
      :deep(img) {
        width: 100%;
      }
    }
  }
  footer {
    display: flex;
    width: 100%;
    height: 88px;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    align-items: center;
    .p1 {
      width: 35%;
      font-size: 32px;
      color: rgb(68, 164, 38);
      text-align: center;
      line-height: 88px;
      border-right: 1px solid rgba(0, 0, 0, 0.082);
    }
    .pp {
      width: 20%;
      text-align: center;
      .van-icon {
        margin-top: 20px;
      }
      .p2 {
        font-size: 24px;
        margin-top: -5px;
      }
    }
    .p3 {
      flex: 1;
      color: #fff;
      font-size: 32px;
      text-align: center;
      line-height: 88px;
      background: orangered;
    }
  }
}
</style>
